<template>
  <div class="indent-box">
    <div class="content">
      <div class="top">
        <p>
          <span>收藏</span>
          <span class="figure">{{ collect }}</span>
        </p>
        <p>
          <span>足迹</span>
          <span class="figure">{{ footprint }}</span>
        </p>
        <p class="last">
          <span>关注</span>
          <span class="figure">{{ attention }}</span>
        </p>
      </div>
      <div class="middle">
        <div>
          <router-link to="/orderform/payment" class="skip">
            <span class="iconfont icon-qianbao01">
              <van-badge :content="paymentLength" class="hint" v-show="see1" />
            </span>
            <p>待付款</p>
          </router-link>
        </div>
        <div>
          <router-link to="/orderform/collect" class="skip">
            <span class="iconfont icon--">
              <van-badge :content="collectLength" class="hint" v-show="see2" />
            </span>
            <p>待收货</p>
          </router-link>
        </div>
        <div>
          <router-link to="/orderform/evaluate" class="skip">
            <span class="iconfont icon-pingjia">
              <van-badge :content="evaluateLength" class="hint" v-show="see3" />
            </span>
            <p>待评价</p>
          </router-link>
        </div>
        <div>
          <span class="iconfont icon-tuihuan-"></span>
          <p>退换/售后</p>
        </div>
        <div>
          <router-link to="/orderform/all" class="skip">
            <span class="iconfont icon-dingdan"></span>
            <p>全部订单</p>
          </router-link>
        </div>
      </div>
      <div class="base" v-show="pinglun">
        <div class="left">
          <img :src="img" />

          <div class="comment">
            <p>评价晒单得米金</p>
            <span
              >完成评论最多可得<span class="amount">{{ money }}</span
              >米金</span
            >
          </div>
        </div>
        <div class="right">评价晒单</div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import store from "../../store/index";

export default {
  name: "indent",
  data() {
    return {
      collect: "",
      footprint: "",
      attention: "",
      pinglun: false,
      money: "",
      img: "",
      paymentLength: "",
      collectLength: "",
      evaluateLength: "",
      see1: false,
      see2: false,
      see3: false,
    };
  },

  created() {
    let that = this;
    axios({
      url: "http://localhost:3000/message?tel=" + localStorage.getItem("tel"),
      method: "get",
      params: {
        type: this.type,
      },
    }).then((res) => {
      if (localStorage.getItem("tel") == res.data[0].tel) {
        this.pinglun = true;
        this.collect = res.data[0].collect;
        this.footprint = res.data[0].footprint;
        this.attention = res.data[0].attention;
        this.money = res.data[0].money;
        this.img = res.data[0].img;
        console.log(this.img);

        // if (this.$store.state.collectLength > 0) {
        //   this.see2 = true;
        // }
        // if (this.$store.state.evaluateLength > 0) {
        //   this.see3 = true;
        // }
        // this.paymentLength = this.$store.state.paymentLength;
        // this.collectLength = this.$store.state.collectLength;
        // this.evaluateLength = this.$store.state.evaluateLength;
      }
    });
    axios
      .all([
        axios.get(
          "http://localhost:3000/delivery?tel=" + localStorage.getItem("tel")
        ),
        axios.get(
          "http://localhost:3000/payment?tel=" + localStorage.getItem("tel")
        ),
        axios.get(
          "http://localhost:3000/indent?tel=" + localStorage.getItem("tel")
        ),
      ])
      .then(
        axios.spread(function (goods1, goods2, goods3) {
          store.commit("mChangePayment",goods1.data);  
          store.commit("mChangeCollect",goods2.data);  
          store.commit("mChangeEvaluate",goods3.data);  
          that.paymentLength = goods1.data.length;
          that.collectLength = goods2.data.length;
          that.evaluateLength = goods3.data.length;
          if (goods1.data.length > 0) {
            that.see1 = true;
          }
          if (goods2.data.length > 0) {
            that.see2 = true;
          }
          if (goods3.data.length > 0) {
            that.see3 = true;
          }

          console.log(goods2.data.length);
          console.log(goods2.data);
          console.log(goods3.data);
          console.log(that);
        })
      );
  },
};

import Vue from "vue";
import { Badge } from "vant";

Vue.use(Badge);
</script>

<style scoped>
.skip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 650;
}
.hint {
  position: absolute;
  top: -0.1rem;
  right: -0.1rem;
}
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  position: absolute;
}
@import url(../../assets/xiaomi-iconfont/iconfont.css);
.indent-box {
  /* height: 1.86rem; */
  margin-top: 0.13rem;
  box-sizing: border-box;
  padding: 0 0.13rem;
}
.indent-box .content {
  background: white;
  border-radius: 0.05rem;
  padding-bottom: 0.1rem;
}
.indent-box .content .top {
  height: 0.37rem;
  border-bottom: 1px solid #e4e4e4;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  margin: 0 0.1rem;
}
.indent-box .content .top p {
  width: 33%;
  border-right: 1px solid #b5b5b5;
  display: flex;
  justify-content: center;
  align-items: center;
}
.indent-box .content .top p span {
  font-size: 0.13rem;
  color: #919191;
}
.indent-box .content .top p .figure {
  margin-left: 0.02rem;
  color: #060606;
  font-weight: 700;
}
.indent-box .content .top .last {
  border-right: 0;
}
.indent-box .middle {
  height: 0.87rem;
  display: flex;
  justify-content: space-around;
}
.indent-box .middle div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 550;
}
.indent-box .middle .iconfont {
  font-size: 0.2rem;
  position: relative;
  font-weight: 700;
}
.indent-box .middle p {
  font-size: 0.11rem;
  margin-top: 0.1rem;
}
.indent-box .base {
  height: 0.5rem;
  background: #e9e9e9;
  border-radius: 0.04rem;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 0.1rem;
}
.indent-box .base .left {
  display: flex;
}
.indent-box .base .left img {
  width: 0.4rem;
  height: 0.4rem;
  background: white;
  border-radius: 0.03rem;
  margin-right: 0.07rem;
}
.indent-box .base .left .comment p {
  font-size: 12px;
  font-weight: bold;
}
.indent-box .base .left .comment {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.indent-box .base .left .comment span {
  font-size: 11px;
  color: #676767;
}
.indent-box .base .left .comment span .amount {
  color: #ec4d34;
}
.indent-box .base .right {
  width: 0.7rem;
  height: 0.26rem;
  line-height: 0.26rem;
  background-color: #f7690e;
  border-radius: 0.13rem;
  font-size: 0.12rem;
  color: #fff;
  text-align: center;
}
</style>
